<template>
  <div v-show="is_show_Account" class="account_cpn" @click="closePList">
     <div class="ac_cpnBg">
        <img @click="opera_AcPopFn(false)" class="closeBtn" src="@/assets/img/account/close.png" >
        <dl>
          <dt>
            登录即视为同意
            <a href="javascript:void(0);">用户服务协议</a>
            、
            <a href="javascript:void(0);">隐私政策</a>
            和
            <a href="javascript:void(0);">授权许可协议</a>
            。如果您成为稿定设计会员，成为会员即视为同意
            <a href="javascript:void(0);">会员服务协议</a>
          </dt>
          <dd>
            <dl v-show="isLogin" class="login">
              <dt>

                <div v-show="is_wxLogin" class="wxLoginBox">
                  <div class="title">
                    <h2>
                      微信扫码登录注册
                    </h2>
                    <h6>
                      登录开启设计新世界
                    </h6>
                  </div>
                  <div class="QRCodeDiv" ref="qrCodeDiv"></div>
                </div>

                <div v-show="!is_wxLogin" class="mbLoginBox">
                    <div class="title">
                      <span v-if="!is_msg_login">
                        账号密码登录
                      </span>
                      <span v-else>
                        短信密码登录
                      </span>
                    </div>

                    <ul>
                    	<li>
                        <div class="inpBox">
                          <div class="LeBox">
                            <span class="open_p_L" @click="PLFn">
                              +{{cur_p_name}}
                            </span>
                            <p class="open_p_L" @click="PLFn"></p>
                            <div v-show="isPL" class="p_ListBg">
                              <div class="p_List">
                                <div @click="p_List_selFn(phoneListIt.tel)" v-for="(phoneListIt,phoneListIdx) in phoneList" :key="'phoneListIt_0'+phoneListIdx">
                                  <span>
                                    {{phoneListIt.name}}
                                  </span>&nbsp;&nbsp;
                                  <span>
                                    +{{phoneListIt.tel}}
                                  </span>
                                </div>
                              </div>
                            </div>
                          </div>
                          <input class="wid_00" type="text" placeholder="输入手机号"/>
                        </div>
                      </li>

                    	<li v-show="!is_msg_login">
                        <div class="inpBox">
                          <div class="Le">
                            <h3>
                              密码
                            </h3>
                          </div>
                          <input class="wid_00" type="password" placeholder="输入6-30位密码"/>
                        </div>
                      </li>

                      <li class="msgLi" v-show="is_msg_login">

                        <div class="inpBox">
                            <input class="wid_01" type="password" placeholder="输入短信中的验证码"/>
                        </div>
                        <div @click="secBtn" class="yzCodeBox">
                           <h3 v-show="is_secRev">
                             获取验证码
                           </h3>
                           <h5 v-show="!is_secRev">
                             {{sec}}秒后获取
                           </h5>
                        </div>

                      </li>

                    	<li>
                        <div class="opera">
                          <div class="Le" @click="msgLoginFn">
                            <span v-if="is_msg_login">
                              账号密码登录
                            </span>
                            <span v-else>
                              短信密码登录
                            </span>
                          </div>
                          <div @click="goFindPwd" class="Ri">
                            忘记密码
                          </div>
                        </div>
                      </li>
                    	<li>
                        <button>
                          登录
                        </button>
                      </li>
                    </ul>
                </div>

              </dt>
              <dd>
                <ul>
                	<li @click="isWxBtnFn">
                    <div v-if="is_wxLogin" class="Lgbtn">
                      <img src="@/assets/img/account/mb.png" >
                      <span>
                        手机号登录
                      </span>
                    </div>
                    <div v-else class="Lgbtn">
                      <img src="@/assets/img/account/wx.png" >
                      <span>
                        微信登录
                      </span>
                    </div>
                  </li>
                	<li>
                    <div class="Lgbtn">
                      <img src="@/assets/img/account/qq.png" >
                      <span>
                        QQ登录
                      </span>
                    </div>
                  </li>
                	<li @click="goRegFn">
                    <div class="Lgbtn">
                      <span>
                        手机号注册
                      </span>
                      <img class="sjRegImg" src="@/assets/img/account/arr_r.png" >
                    </div>
                  </li>
                </ul>
              </dd>
            </dl>
            <!--忘记密码-->
            <div v-show="isFindPwd" class="pwd_Reg mbLoginBox">

              <div class="pwd_RegBox">

                  <div class="title">
                      <h3>
                        更改密码
                      </h3>
                  </div>
                  <ul>
                  	<li>
                      <div class="inpBox">
                        <div class="LeBox">
                          <span class="open_p_L" @click="PLFn">
                            +{{cur_p_name}}
                          </span>
                          <p class="open_p_L" @click="PLFn"></p>
                          <div v-show="isPL" class="p_ListBg">
                            <div class="p_List">
                              <div @click="p_List_selFn(phoneListIt.tel)" v-for="(phoneListIt,phoneListIdx) in phoneList" :key="'phoneListIt_0'+phoneListIdx">
                                <span>
                                  {{phoneListIt.name}}
                                </span>&nbsp;&nbsp;
                                <span>
                                  +{{phoneListIt.tel}}
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <input class="wid_00" type="text" placeholder="输入手机号"/>
                      </div>
                    </li>

                    <li class="msgLi">

                      <div class="inpBox">
                          <input class="wid_01" type="password" placeholder="输入短信中的验证码"/>
                      </div>
                      <div @click="secBtn" class="yzCodeBox">
                         <h3 v-show="is_secRev">
                           获取验证码
                         </h3>
                         <h5 v-show="!is_secRev">
                           {{sec}}秒后获取
                         </h5>
                      </div>

                    </li>

                    <li>
                      <div class="inpBox">
                        <input class="wid_02" type="password" placeholder="输入6-30位新密码"/>
                      </div>
                    </li>


                  	<li>
                      <button>
                        更改密码
                      </button>
                    </li>
                  </ul>
              </div>

              <div class="goLoginBoxText">
                <h4>
                  想起密码？
                </h4>
                <h5 @click="goLoginFn">
                  去登录
                </h5>
              </div>

            </div>
            <!--手机号注册-->
            <div v-show="isReg" class="pwd_Reg mbLoginBox">
              <div class="pwd_RegBox">

                  <div class="title">
                      <h3>
                        注册账号
                      </h3>
                  </div>
                  <ul>
                  	<li>
                      <div class="inpBox">
                        <div class="LeBox">
                          <span class="open_p_L" @click="PLFn">
                            +{{cur_p_name}}
                          </span>
                          <p class="open_p_L" @click="PLFn"></p>
                          <div v-show="isPL" class="p_ListBg">
                            <div class="p_List">
                              <div @click="p_List_selFn(phoneListIt.tel)" v-for="(phoneListIt,phoneListIdx) in phoneList" :key="'phoneListIt_0'+phoneListIdx">
                                <span>
                                  {{phoneListIt.name}}
                                </span>&nbsp;&nbsp;
                                <span>
                                  +{{phoneListIt.tel}}
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <input class="wid_00" type="text" placeholder="输入手机号"/>
                      </div>
                    </li>

                    <li class="msgLi">

                      <div class="inpBox">
                          <input class="wid_01" type="password" placeholder="输入短信中的验证码"/>
                      </div>
                      <div @click="secBtn" class="yzCodeBox">
                         <h3 v-show="is_secRev">
                           获取验证码
                         </h3>
                         <h5 v-show="!is_secRev">
                           {{sec}}秒后获取
                         </h5>
                      </div>

                    </li>

                    <li>
                      <div class="inpBox">
                        <input class="wid_02" type="password" placeholder="输入6-30位密码"/>
                      </div>
                    </li>


                  	<li>
                      <button>
                        注册账号
                      </button>
                    </li>
                  </ul>
              </div>
              <div class="goLoginBoxText">
                <h4>
                  已有账号？
                </h4>
                <h5 @click="goLoginFn">
                  去登录
                </h5>
              </div>
            </div>
          </dd>
        </dl>

     </div>
  </div>
</template>

<script>
    import phoneArea from "@/utils/area_Phone.js";
  	import QRCode from 'qrcodejs2';
    export default{
      data(){
        return{
          tgLink:"微信登录",
          sec:60,
          is_secRev:true,
          sec_timer:null,
          isPL:false,
          phoneList:[],
          cur_p_name:"86",
          is_msg_login:false,
          isLogin:true,
          isReg:false,
          isFindPwd:false,
          is_wxLogin:true,
          is_show_Account:false
        }
      },
      mounted() {
        let that=this;
        this.phoneList=phoneArea;
        console.log("this.phoneList:",this.phoneList);
        new QRCode(this.$refs.qrCodeDiv, {
        	  text: this.tgLink,
        	  width: 146,
        	  height: 146,
        	  colorDark: "#333333", //二维码颜色
        	  colorLight: "#ffffff", //二维码背景色
        	  correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
        });
      },
      methods:{
        opera_AcPopFn(val){
          this.is_show_Account=val;
        },

        acSecTimer(){
          let that=this;
          that.sec=60;
          that.is_secRev=true;
          clearInterval(that.sec_timer);
          that.sec_timer=null;
        },
        secBtn(){
          let that=this;
          if(that.is_secRev){
            that.is_secRev=false;
            that.sec_timer=setInterval(()=>{
              if(that.sec<=0){
                that.acSecTimer();
              }else{
                that.sec--;
              }
            },1000);
          }
        },
        closePList(e){
          console.log("关闭：",e.target.className);
          if(e.target.className!=="open_p_L"){
            this.isPL=false;
          }
        },
        p_List_selFn(val){
          this.isPL=false;
          this.cur_p_name=val;
        },
        PLFn(){
         this.isPL=!this.isPL;
        },
        isWxBtnFn(){
          let that=this;
          this.is_wxLogin=!this.is_wxLogin;
          that.acSecTimer();
          this.is_msg_login=false;
          that.isLogin=true;
          that.isReg=false;
          that.isFindPwd=false;
        },
        goFindPwd(){
          let that=this;
          that.isLogin=false;
          that.isReg=false;
          that.isFindPwd=true;
          that.acSecTimer();
        },
        goLoginFn(){
          let that=this;
          that.isLogin=true;
          that.isReg=false;
          that.isFindPwd=false;
          that.acSecTimer();
        },
        goRegFn(){
          let that=this;
          that.isLogin=false;
          that.isReg=true;
          that.isFindPwd=false;
          that.acSecTimer();
        },
        msgLoginFn(){
          let that=this;
          this.is_msg_login=!this.is_msg_login;
          that.acSecTimer();
        }
      }
    }
</script>

<style lang="less" scoped="scoped">
  @import "../assets/css/account_cpn.less";
</style>
